<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="查询时间段">
          <el-select v-model="type" style="width: 80px;">
            <el-option :value="1" label="年"></el-option>
            <el-option :value="2" label="月"></el-option>
            <el-option :value="3" label="日"></el-option>
          </el-select>
          <el-date-picker
            :type="pickerType" v-model="start"
            :format="pickerFormatter" :value-format="pickerFormatter"
            placeholder="开始时间"
          ></el-date-picker>
          <el-date-picker
            :type="pickerType" v-model="end"
            :format="pickerFormatter" :value-format="pickerFormatter"
            placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="summary text-gray padding-bottom">
      共 33天， 上报国家中心：完全上报 0天， 部分上报 0天， 未上报 33天， 上报省中心：完全上报 0天， 部分上报 33天， 未上报 0天；
    </div>
    <el-table
      v-loading="loading" :data="lists" height="100%"
      class="table"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white',
        textAlign: 'center'
      }"
      :cell-style="{
        textAlign: 'center'
      }"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column
        v-for="column in columns" :key="column.label"
        v-bind="column"
      >
        <template v-if="column.children && column.children.length > 0">
          <el-table-column
            v-for="item in column.children" :key="item.label"
            v-bind="item"
          ></el-table-column>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="operate">
        <template #default="{ row }">
          <td-button icon="browse" title="明细" @click="viewDetail(row)"></td-button>
          <td-button icon="upload" title="手动上报" @click="report(row)"></td-button>
        </template>
      </el-table-column>
    </el-table>
    <detail-modal ref="modal"></detail-modal>
  </div>
</template>

<script>
import TdButton from '@/components/td-button'
import DetailModal from './detail-modal'

export default {
  name: 'report-data-statistics',
  components: {
    TdButton,
    DetailModal
  },
  data () {
    const start = this.$dayjs().subtract(7, 'day').format('YYYY-MM-DD')
    const end = this.$dayjs().format('YYYY-MM-DD')
    return {
      type: 3,
      start: start,
      end: end,
      loading: false,
      lists: [],
      columns: [
        {
          label: '日期',
          prop: 'col1'
        },
        {
          label: '应报数',
          prop: 'col2'
        },
        {
          label: '已采数',
          prop: 'col3'
        },
        {
          label: '最后采集时间',
          prop: 'col4'
        },
        {
          label: '已报数',
          children: [
            {
              label: '上报国家中心',
              prop: 'col5'
            },
            {
              label: '上报省中心',
              prop: 'col6'
            },
          ]
        },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    pickerType () {
      const { type } = this
      return type === 1
        ? 'year'
        : type === 2
          ? 'month'
          : 'date'
    },
    pickerFormatter () {
      const { type } = this
      return type === 1
        ? 'yyyy'
        : type === 2
          ? 'yyyy-MM'
          : 'yyyy-MM-dd'
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            {
              col1: '2023-04-03',
              col2: '14',
              col3: '13',
              col4: '2023-04-04 01:20:50',
              col5: '0',
              col6: '0',
              col7: '',
              col8: '',
            },
            {
              col1: '2023-04-13',
              col2: '14',
              col3: '13',
              col4: '2023-04-04 01:20:50',
              col5: '0',
              col6: '0',
              col7: '',
              col8: '',
            },
            {
              col1: '2023-05-03',
              col2: '14',
              col3: '13',
              col4: '2023-04-04 01:20:50',
              col5: '0',
              col6: '0',
              col7: '',
              col8: '',
            }
          ]
        }, 600)
      })
    },
    viewDetail (row) {
      this.$refs.modal.open()
    },
    report (row) {},
  }
}
</script>
